<template>
  <div class="coEdit-wrapper">
    <div class="coEdit-header">
      <div class="left">
        <span>协同编辑</span>
        <div class="btn-area" v-if="checksSelect.length">
          <el-button type="danger" @click="removeRowEvent(checksSelect)">删除</el-button>
          <el-button color="#626aef" :dark="isDark" @click="cancelSelect">取消选择</el-button>
        </div>
      </div>
      <div class="right">
        <el-button type="primary" :icon="Plus" @click="createFile">新建excel文件</el-button>
      </div>
    </div>
    <el-divider />
    <div class="list-type" >
      <el-row :gutter="20">
        <el-col span="" style="margin: 10px;padding: 0px;" v-for="(item,index) in coEditData">
          <div :class="[isChecked(item.wb_id) ? 'active-fileItem' : 'file-item']" @click.stop="openEditBoxEvent(item)">
            <div class="top">
              <el-checkbox-group v-model="checksSelect" style="margin-top: 4px;">
                <el-checkbox
                  :label="item.wb_id"
                  @click.stop.native="()=>{}"
                />
              </el-checkbox-group>
              <span @click.stop>
                <el-dropdown trigger="click" >
                  <MoreFilled class="more-icon" />
                  <template #dropdown>
                    <el-dropdown-menu style="width: 120px;">
                      <el-dropdown-item
                        style="padding:10px 0px; font-size: 12px;display: flex; justify-content: center;"
                        @click="editEvent(item, index)"
                      >
                        重命名
                      </el-dropdown-item>
                        <el-dropdown-item
                        style="padding:10px 0px; font-size: 12px;display: flex; justify-content: center;color: red;"
                        @click="removeRowEvent([item.wb_id])"
                      >
                        删除
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </span>
            </div>
            <div class="center">
              <svg-icon icon-class="excel" class="icon" />
            </div>
            <div class="bottom">
              <el-input
                v-if="editFileName.id === item.wb_id && editFileName.isShowEdit"
                ref="editInput"
                style="height: 20px;font-size: 12px;"
   
                v-model="editFileName.name"
                placeholder="请输入文件名"
                @change="changeEvent"
                @blur="blurEvent"
                @click.stop.native
              />
              <span v-else class="item_title">{{ item.name }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, reactive, ref, computed } from "vue";
import { Plus, Close, MoreFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import {getCookies} from '../../utils/auth.js'

import {wordController} from '@/api'

const coEditData = ref([])
const router = useRouter()
const fileTable = ref<any>(null)
const editInput = ref()
const focusInput = ref(false)

const user_id=getCookies('user_id')

// 是否展示文件名编辑框
const editFileName = reactive({
  isShowEdit: false,
  id: null,
  name: null,
  type: null
})

// 文件列表复选框选中数组
const checksSelect = ref([])

// 使用计算属性，给列表文件选中时动态绑定class
const isChecked = computed(() => (id) => {
  const istrue = false
  checksSelect.value.forEach(item => {
    if(item === id) {
      istrue = true
    }
  });
  return istrue
})
// 取消列表文件选中
const cancelSelect = () => {
  checksSelect.value = []
}

onMounted(() => {
  getCoEditList()
})


// 新建协同文件
const createFile = async () => {
  const $table = fileTable.value
  const record = {
    name: '新建文件'+Math.round(Math.random()*100),
    size: '0',
    type: 'excel',
    owner: '',
    uploadTime: ''
  }
  const res = await wordController.addWord({name:record.name, user_id: user_id})
  if(res.data.code === 200) {
    ElMessage({message: '添加成功', type: 'success'})
    getCoEditList()
  }
  
  const {row: newRow} = await $table.insertAt(record)
}

// 获取文件列表数据
async function getCoEditList() {
  console.log(user_id)
  const res = await wordController.getWordList({user_id: user_id})
  if(res.data.code === 200) {
    coEditData.value = res.data.data
  }
  console.log(coEditData.value)
}


// 点击编辑按钮触发
const editEvent = (row, index) => {
  editFileName.id = row.wb_id
  editFileName.isShowEdit = true
  if(row.name.includes('.')) {
    editFileName.name = row.name.split('.')[0]
    editFileName.type = row.name.split('.')[1]
  } else {
    editFileName.name = row.name
  }
}

const openEditBoxEvent = (row) =>{
    console.log(row.wb_id);
    
    router.push({path:'editBox',query:{wb_id:row.wb_id,wb_name:row.name}})
}
// 值改变后失去焦点或按下enter时触发
const changeEvent = async (value) => {
  if(editFileName.type) {
    const res = await wordController.updateWord({wb_id: editFileName.id, name: `${value}.${editFileName.type}`})
    if(res.data.code === 200) {
      ElMessage({message: '修改成功', type: 'success'})
      editFileName.isShowEdit = false
      editFileName.name = null
      editFileName.type = null
      getCoEditList()
    }
  } else {
    const res = await wordController.updateWord({wb_id: editFileName.id, name: value})
    if(res.data.code === 200) {
      ElMessage({message: '修改成功', type: 'success'})
      editFileName.isShowEdit = false
      editFileName.name = null
      editFileName.type = null
      getCoEditList()
    }
  }
}
// 不改变值时失去焦点触发
const blurEvent = (value) => {
  editFileName.isShowEdit = false
}

function removeRowEvent(idList) {
  ElMessageBox.confirm(
    '此操作为将永久删除, 是否继续?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    const res = await wordController.delWord({id_list: idList})
    if(res.data.code === 200) {
      ElMessage({message: '删除成功', type: 'success'})
      getCoEditList()
      checksSelect.value = []
    }
  })
}


</script>

<style scoped lang="scss">
.coEdit-wrapper {
  height: 100%;
  width: 99%;
  margin: 5px 10px;
  padding-top: 20px;
  .coEdit-header {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      width: 450px;
      align-items: center;
      span {
        font-size: 30px;
        font-weight: bold;
      }
      .refresh{
        margin-left: 15px;
      }
      .btn-area {
        font-size: 11px;
        margin-left: 20px;
        .el-button {
          height: 25px;
        }
      }
    }
    .right {
      margin-right: 5px;
    }
  }
  .coEdit-menu {
    .icon {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }
    .edit-row {
      display: flex;
      align-items: center;
      .edit-icon {
        display: none;
        margin-left: 10px;
        opacity: .6;
      }
    }
    .edit-row:hover .edit-icon {
      display: block;
      margin-left: 10px;
      opacity: .6;
    }
    .edit-box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.active {
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color: #F8F8F8;
  bottom: 0;
  height: 88%;
  width: 100%;
  z-index: 1000;
  .closeArea {
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
    margin-bottom: 10px;
    .closeIcon {
      width: 35px;
      height: 35px;
      opacity: .2;
    }
  }
}


.list-type {
  .file-item {
    width: 100px;
    height: 110px;
    border-radius: 5px;
    .top {
      height: 20px;
      margin: 4px;
      overflow: hidden;
      .el-checkbox {
        opacity: 0;
      }
      
    }
    .center {
      height: 50px;
      text-align: center;
      .icon {
        width: 50px;
        height: 50px;
      }
    }
    .bottom {
      font-size: 12px;
      text-align: center;
      margin-top: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      letter-spacing: 1px;
    }
  }
  .active-fileItem {
    width: 100px;
    height: 110px;
    border-radius: 5px;
    background-color: #F4F5F7;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 4px;
      .el-checkbox {
        height: 0px;
        opacity: 1;
      }
      .more-icon {
        width: 20px;
        height: 20px;
        opacity: .4;
      }
    }
      .center {
      height: 50px;
      text-align: center;
      .icon {
        width: 50px;
        height: 50px;
      }
    }
    .bottom {
      font-size: 12px;
      text-align: center;
      margin-top: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      letter-spacing: 1px;
    }
  }
  .file-item:hover {
    background-color: #F4F5F7;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 4px;
      .el-checkbox {
        height: 0px;
        opacity: 1;
      }
      .more-icon {
        width: 20px;
        height: 20px;
        opacity: .4;
      }
    }
  }
}

::v-deep .el-dropdown-menu__item {
  padding: 0;
}

::v-deep .el-checkbox__label {
  display: none;
}
</style>
